<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">
            <select name="time" v-model="selectTime">
                <option value="">时间</option>
                <option :value="index" v-for="(item,index) in timeList" :key="index">
                    {{item}}
                </option>
            </select>
            <table>
                <tr v-for="(item,index) in list[selectTime]" :key="index">
                    
                    <td>{{item}}</td>
                </tr>
            </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data:{
                list : [[],[]],
                timeList:[8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0],
                selectTime:0,
            },
            mounted() {
                this.requestData();
            },
            methods:{
                requestData() {
                    axios.post("https://v2.alapi.cn/api/tianqi",{
                    token: 'ssWu3bM8uLWuX4Vf',
                    city:"晋江",
                })
                    .then(
                        res => {
                            this.list=res.data.data.hour;
                        },
                        err => {
                            console.log("请求失败");
                        }
                    )
            }
            }
          
        })
    </script>

</body>

</html>